<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式</title>
     <!-- 浏览器宽度 => 1201 -->
    <link rel="stylesheet" href="./css/pc.css" media="screen and (min-width:1201px)" >
    <!-- 1200 => 浏览器宽度 => 751 -->
    <link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1200px) and (min-width:751px)" >
    <!-- 浏览器宽度 <= 750 -->
    <link rel="stylesheet" href="./css/mobile.css" media="screen and (max-width:750px)" >
    <!-- 媒体类型为打印时 -->
    <link rel="stylesheet" href="./css/print.css" media="print" >
    <!-- 媒体类型为所有且设备的硬件宽度(屏幕的分辨率宽度)为1920px -->
    <link rel="stylesheet" href="./css/print.css" media="all and (device-width:1920px)" >
</head>
<body>
    <div class="box">

    </div>
</body>
</html>